import React from 'react'
import { Form, Input, Button, Cascader, message, Card, Row, Col } from 'antd'
import styles from './CompanyInfo.less'
import propTypes from 'prop-types'
import gql from 'graphql-tag'
import Header from '../../components/Header/index'
import GraphqlComponent from 'DHBStatement/libs/components/GraphqlComponent'
const AGQL = (props) => componet => GraphqlComponent(componet, props, 'system')
// 头部
const headerData = {
  title: '公司资料',
  hasPopover: true,
  popoverContent: <div>
    <p>对你的客户公布公司基本信息</p>
  </div>,
  hasSubNav: true,
  subNavItem: [
    {
      title: '首页',
      link: true
    },
    {
      title: '系统',
      link: false
    },
    {
      title: '公司设置',
      link: true
    }
  ]
}
// 表单
const colSpan = {
  span: 4
}

const options = require('../../utils/city.js').default

// 数据保存
const Save = ({ validateFields, saveEditInformation, loading }) => {
  return <Button loading={loading} size='small' type='primary' onClick={() => save(validateFields, saveEditInformation)}>保存</Button>
}

const SaveAGQL = AGQL({
  mutation: gql`
  mutation saveEditInformation($company: CompanyInfomation!){
    saveEditInformation(company: $company) {
      status
      message
    }
  }
`,
  name: 'saveEditInformation'
})(Save)

function save (validateFields, save) {
  validateFields((err, data) => {
    if (!err) {
      data.areaId = data.areaId.join(',')
      save({ variables: { company: data } }).then(res => {
        console.log(res)
        message.success(res.data.saveEditInformation.message)
      }).catch(err => {
        console.log(err)
      })
    }
  })
}
// 获取公司信息
function CompanyInfo ({ loading, data, form: { getFieldDecorator, validateFields } }) {
  const { companyInfomation = {} } = data
  console.log(data)
  return (
    <div>
      <Header header={headerData} />
      <div className={styles.container}>
        <Card extra={<SaveAGQL validateFields={validateFields} />} loading={loading} title='公司信息'>
          <Form>
            <Row gutter={15}>
              <Col {...colSpan}>
                <Form.Item required label='公司名称'>
                  <Input disabled value={companyInfomation.companyName} />
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item required label='所属行业'>
                  <Input disabled value={companyInfomation.industryId} />
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='公司地址'>
                  {
                    getFieldDecorator('areaId', { initialValue: companyInfomation.areaId && companyInfomation.areaId.split(',') })(
                      <Cascader style={{ textAlign: 'left', color: '#ccccccc' }} options={options} />
                    )
                  }
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='公司详细地址'>
                  {
                    getFieldDecorator('address', { initialValue: companyInfomation.address })(<Input />)
                  }
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='邮箱'>
                  {
                    getFieldDecorator('email', { initialValue: companyInfomation.email })(
                      <Input />
                    )
                  }
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='传真'>
                  {
                    getFieldDecorator('fax', { initialValue: companyInfomation.fax })(
                      <Input />
                    )
                  }
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='联系人'>
                  {
                    getFieldDecorator('contact', { initialValue: companyInfomation.legalPerson })(
                      <Input />
                    )
                  }
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='联系电话'>
                  {
                    getFieldDecorator('phone', { initialValue: companyInfomation.legalMobile })(
                      <Input />
                    )
                  }
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label='公司介绍'>
                  {
                    getFieldDecorator('about', { initialValue: companyInfomation.about })(
                      <Input.TextArea rows={3} />
                    )
                  }
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>
        <Card extra={<SaveAGQL validateFields={validateFields} />} loading={loading} style={{ marginTop: 30 }} title={'财务信息'}>
          <Form>
            <Row gutter={15}>
              <Col {...colSpan}>
                <Form.Item label='开户名称'>
                  {
                    getFieldDecorator('accountName', { initialValue: companyInfomation.accountName })(
                      <Input />
                    )
                  }
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='开户银行'>
                  {
                    getFieldDecorator('bank', { initialValue: companyInfomation.bank })(
                      <Input />
                    )
                  }
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='银行账号'>
                  {
                    getFieldDecorator('bankAccount', { initialValue: companyInfomation.bankAccount })(
                      <Input />
                    )
                  }
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='开票抬头'>
                  {
                    getFieldDecorator('invoiceTitle', { initialValue: companyInfomation.invoiceTitle })(
                      <Input />
                    )
                  }
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='纳税人识别号'>
                  {
                    getFieldDecorator('taxPayperNumber', { initialValue: companyInfomation.taxPayperNumber })(
                      <Input />
                    )
                  }
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='纳税人识别号'>
                  {
                    getFieldDecorator('taxPayperNumber', { initialValue: companyInfomation.taxPayperNumber })(
                      <Input />
                    )
                  }
                </Form.Item>
              </Col>
              <Col {...colSpan}>
                <Form.Item label='发票ID'>
                  {
                    getFieldDecorator('finance', { initialValue: companyInfomation.financeId })(
                      <Input />
                    )
                  }
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>
      </div>
    </div>
  )
}

CompanyInfo.propTypes = {
  loading: propTypes.bool,
  data: propTypes.object,
  form: propTypes.object,
  refetch: propTypes.func,
  variables: propTypes.object
}

Save.propTypes = {
  validateFields: propTypes.func,
  refetch: propTypes.func,
  variables: propTypes.object,
  saveEditInformation: propTypes.func,
  loading: propTypes.bool
}
// export default connect(({ companyInfo }) => ({ companyInfo }))(CompanyInfo)

export default AGQL({
  query: gql`
  query{
    companyInfomation{
      companyId
      companyName
      industryId
      areaId
      address
      email
      fax
      legalPerson
      legalMobile
      accountName
      bank
      bankAccount
      invoiceTitle
      taxPayperNumber
      financeId
      about
    }
  }
  `
})((Form.create()(CompanyInfo)))
